<template>
  <div class="address-list">
    <van-nav-bar title="地址管理" left-text="返回" left-arrow @click-left="back"/>
    <Bg>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        :switchable="false"
        default-tag-text="默认"
        @add="add"
        @edit="edit"
      />
    </Bg>
  </div>
</template>

<script>
import Bg from "../components/bg";
import "../assets/less/addressList.less";
export default {
  name: "AddressList",
  data() {
    return {
      chosenAddressId: "1",
      list: [],
    };
  },
  components: {
    Bg,
  },
  created() {
    this.getAddressList();
  },
  methods: {
    //查询用户地址列表
    getAddressList() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findAddress",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      }).then((res) => {
        // console.log("res getAddressListData ==> ", res);
        this.$toast.clear();

        if (res.data.code == 700) {
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000,
          });
          return this.$router.push({ name: "Login" });
        }

        if(res.data.code === 20000){
           //添加address属性 
           res.data.result.forEach(v =>{
               v.address = `${v.province}${v.city}${v.county}${v.addressDetail}`;
               v.isDefault = !!v.isDefault;
           })
           this.list = res.data.result;
        }
      });
    },
    //新添地址
    add(){
        this.$router.push({name: 'AddressEdit'})
    },
    //返回上一页
    back(){
        this.$router.go(-1);
    },
    //编辑
    edit({aid}){
       this.$router.push({name: 'AddressEdit', params: {aid}});
    }
  },
};
</script>
